<!--安排发货出库，订单列表-->
<style lang="less" scoped>
  .list-tag {
    .tag {
      position: unset;
      top:unset;
      left: unset;
      padding:2px 6px;
      margin-left: 5px;
    }
  }
  .acpt-list-body {
    .txt {
      padding-right:10px;
    }
  }
</style>

<template>
  <div class="contain">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'customDelivery', tabNo: this.type}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '输入客户名称或单号'}}</div>
          </div>
        </router-link>
      </div>
      <!--tab-->
      <div class="lltab ft14">
        <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width='2' v-model="tabNo">
          <tab-item @on-item-click="goLink(1)">要货单</tab-item>
          <tab-item @on-item-click="goLink(2)">送货单</tab-item>
          <tab-item @on-item-click="goLink(3)">使用单</tab-item>
          <tab-item @on-item-click="goLink(4)">还货单</tab-item>
        </tab>
      </div>
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-167" class='scroller-wrap' @on-pullup-loading="loadMore1" v-if="items.length > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div class="acpt-list">
        <div class="acpt-list-wrap mb30" v-for="item in items">
          <div class="acpt-list-head cf">
            <span class="time f-l" v-if="type ==2 || type ==4">{{item.BBillNo}}</span>  
            <span class="time f-l" v-else>{{item.BillNo}}</span>
            <em class="org f-r ft12" v-if="type ==3">{{item.State | Trsupplierhvpostate}}</em>
            <em class="org f-r ft12" v-else>{{item.BillState | Trsupplierhvpostate}}</em>
          </div>
          <div class="displayflex acpt-list-body">
            <i class="iconfont icon-cargo"></i>
            <div class="txt flex1" @click="gotoDet(item)">
              <p class="ft17" v-if="type==1 || type ==3">{{item.MedName}}</p>
              <p class="ft17" v-else>{{item.SaleCorpName}}</p>

              <p v-if="type ==3">下单时间：{{item.InputDate | timeshort}}</p>
              <p v-else>下单时间：{{item.BillDate | timeshort}}</p>

              <template v-if="item.Province || item.City || item.District">
                <p>地址：{{item.Province | province}} {{item.City | city}} {{item.District | district}} {{item.Address}}</p>
              </template>

              <p v-if="type == 1 || type == 3">品种数：{{item.DetailRecordSum}}个</p>
              <p v-else>品种数：{{item.CountSum}}个</p>

              <template v-if="item.StaffName && item.StaffName !== ''">
                <div class="list-tag" v-if="type ==3">{{item.StaffName}}<em class="tag">业务员</em></div>
                <div class="list-tag" v-else>{{item.BuyerName}}<em class="tag">业务员</em></div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-if="over" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="items.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='2'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
import Vue from 'vue';
export default {
  name:'delivery',
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',

      PageIndex: 1,
      PageSize:4,
      items:[],
      totalRecords:'',
      over:false,
      type:0,
      tabNo:0,
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    }
  },
  watch: {
    type(n,o){
      if (n == 1) {
        this.getTrsupplierhvpo(1);
      }else if (n == 2) {
        this.gettrtplbbSH(1);
      }else if (n == 4) {
        this.gettrtplbbSH(1);
      }else if (n == 3) {
        this.getTrmedhvur(1);
      }
      this.tabNo = this.type -1;
    }
  },
  created(){
    this.$nextTick(()=>{
      this.sechTxt = sessionStorage.sechtxt;
      if(sessionStorage.getItem('ConsumableTab')){
        this.type = sessionStorage.getItem('ConsumableTab')*1;
        sessionStorage.removeItem('ConsumableTab')
      } else {
        this.type = 1;
      }
    })
  },
  mounted() {
  },
  methods: {
    goLink(val){
      sessionStorage.removeItem('sechtxt');
      this.billState=[];
      this.sechTxt = '';
      this.over = false;
      this.items=[];
      this.type = val;

      this.PageIndex = 1;
      this.ScrollerConfig = {
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      };

      // if (val == 1) {
      //   this.getTrsupplierhvpo(1);
      // }else if (val == 2) {
      //   this.gettrtplbbSH(1);
      // }else if (val == 4) {
      //   this.gettrtplbbSH(1);
      // }else if (val == 3) {
      //   this.getTrmedhvur(1);
      // }
      
      this.$nextTick(() => {
        if(this.items.length>0){
          this.$refs.Scroller.reset({
            top: 0
          });
          this.$refs.Scroller.enablePullup();
        };
      })
    },

    getTrsupplierhvpo(type){
      let info = JSON.parse(localStorage.userinfo),
          query = {
            MedName:this.sechTxt,
            BillNo:this.sechTxt,
            BuyerGuid:info.StaffID,
            TenantGuid: info.TenantGUID,
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          };
      this.Ajax.post('getTrsupplierhvpo',query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if(resp.Datas&&resp.Datas.length > 0){
            this.PageIndex++;
            this.items = this.items.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }

      });
    },
     getTrmedhvur(type){
      let info = JSON.parse(localStorage.userinfo),
          query = {
            MedName:this.sechTxt,
            BillNo:this.sechTxt,
            StaffGuid:info.StaffID,
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          };
      this.Ajax.post('getTrmedhvur',query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords; 
          if(resp.Datas&&resp.Datas.length > 0){
            this.PageIndex++;
            this.items = this.items.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }

      });
    },
    gettrtplbbSH(type){
      let BillType='B04';
      if (this.type == 4) {
          BillType='B05';
      }
      var info = JSON.parse(localStorage.userinfo),
          query = {
            SaleCorpName:this.sechTxt,
            BBillNo:this.sechTxt,
            BuyerGuid:info.StaffID,
            TenantGuid: info.TenantGuid,
            CorpGuid: info.CorpGuid,
            BillType:BillType,
            PageIndex: this.PageIndex,
            PageSize: this.PageSize
          };
      this.Ajax.post('gettrtplbbSH',query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords; 
          if(resp.Datas&&resp.Datas.length > 0){
            this.PageIndex++;
            this.items = this.items.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },

    loadMore1() {
      if (this.type == 1) {
        this.getTrsupplierhvpo(1);
      }else if (this.type == 2) {
        this.gettrtplbbSH(1);
      }else if (this.type == 4) {
        this.gettrtplbbSH(1);
      }else if (this.type == 3) {
        this.getTrmedhvur(1);
      }
    },

    gotoDet(value){
      this.$router.push({
        path:'/order/consumablemateriaDetail',
        query:{
          id:value.Guid,
          type:this.type,
        }
      })
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.over = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.items.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.items.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.over = true;
          });
        });
      }
    }
  }
}
</script>